<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="dulang">
    <title>vue进阶--1 vue响应式原理</title>
    <script src="./vue.js"></script>
</head>

<body>
    <p></p>
    <button onclick="changePetname();">修改petname</button>
    <div id="app"></div>
    <script>
        // 字面量对象
        var stu = {
            name: 'lucy',
            age: 20
        }
        //第一种方法： 给对象添加属性
        stu.weight = 55;
        console.log(stu);

        //第二种方法:给对象添加属性
        // para1:添加属性的对象
        // para2：属性名
        // para3:属性配置
            // enumerable:是否可枚举;是否可以通过泛型遍历列举;默认值是true
            // configurable:是否可配置；是否可以删除;默认值是true
            // writable:是否可写;默认值是true
            // value:属性的值;
        Object.defineProperty(stu, 'height', {
            enumerable: true,
            configurable: true,
            writable: true,
            value: 175
        })
        console.log(stu);
        // 从对象中删除属性
        // delete stu.name ;
        // delete stu.height;
        stu.height = 178;
        console.log(stu);

        // 泛型遍历:遍历对象
        for (var key in stu) {
            console.log(key);
            console.log(stu[key]);
        }

        var arr = [1, 2, 3];
        // 普通遍历：数组
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        //第三种方法: 给对象添加属性             
        //  可以给属性添加set\get方法
        // 当给属性赋值时,实际是调用set方法
        // 当获取属性值时,实际是调用get方法
        Object.defineProperty(stu, 'petname', {
            enumerable: true,
            configurable: true,
            // 参数就是赋的值
            set: function (value) {
                console.log('set');
                this.nickname = value;
                document.getElementsByTagName('p')[0].innerHTML = value;
            },
            get: function () {
                console.log('get');
                return this.nickname;
            }
        })
        console.log(stu);
        stu.petname = '小明';
        var xingMing = stu.petname;

        function changePetname() {
            stu.petname = '小李';
        }

        // vue响应式原理：添加到data中的属性，vue内部会自动生成set、get方法
        // 当修改属性值，会隐含调用set方法,
        // 内部会通知数据的变化,造成页面刷新；


        var app = new Vue({
            el: '#app',
            data: {
                name: 'lucy'
            }
        })
        console.log(app);
    </script>
</body>

</html>